
import React from 'react';
import { Form, Select, Card, Icon, Typography, Divider } from 'antd';

const { Option, OptGroup } = Select;
const { Title, Paragraph, Text } = Typography;

class FromIntroduce extends React.Component {
  render() {
    return (
      <>
        <Typography>
          <Title>Form表单</Title>
          <Paragraph>
          具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
            </Paragraph>

            <Title level={2}>何时使用</Title>
          <Paragraph>
            我们为 <Text code>form</Text> 提供了以下三种排列方式：
          </Paragraph>
          <Paragraph>
            <ul>
              <li>
                <a href="/docs/spec/proximity">用于创建一个实体或收集信息</a>
              </li>
              <li>
                <a href="/docs/pattern/navigation">需要对输入的数据类型进行校验时</a>
              </li>
            </ul>
          </Paragraph>

          {/* <Divider /> */}

          <Title level={2}>表单</Title>
          <Paragraph>
            我们为 <Text code>form</Text> 提供了以下三种排列方式：
          </Paragraph>
          <Paragraph>
            <ul>
              <li>
                <a href="/docs/spec/proximity">水平排列：标签和表单控件水平排列；（默认）</a>
              </li>
              <li>
                <a href="/docs/pattern/navigation">垂直排列：标签和表单控件上下垂直排列；</a>
              </li>
              <li>
                <a href="/docs/resource/download">行内排列：表单项水平行内排列。</a>
              </li>
            </ul>
          </Paragraph>

        </Typography>

      </>
    );
  }
}

const WrappedFromIntroduce = Form.create({ name: 'FromIntroduce1' })(FromIntroduce)
export default WrappedFromIntroduce;